(function (Vue) {
	'use strict';
	// import axios from 'axios'
	var vm = new Vue({
		el:"#todoapp",
		data:{
			//页面加载时从后端读取
			items:[],
			currentItem:null,
			filterState:'all',
			test:''
		},
		methods:{
			addItem(event){
				//获取点击目标事件的值，这里做下去重处理
				let newValue = event.target.value.trim()
				if (!newValue.length){return}
				let newitem = {
					id:this.items.length+1,
					content:newValue,
					completed:false
				};
				this.items.push(newitem)
				event.target.value = ""
				//将请求发往后端
				axios.post("http://127.0.0.1:3000/additems",{
					newitem:newitem
				},(result)=>{
					let res = result.data;
					if(res.status!=="0"){
						alert("新增失败，请检查网络原因")
					}else {
						//刷新最新数据
						getallitems()
					}
				})
			},
			removeItem(id,index){
				//移除对象 splice()，传入移除对象的索引，以及从此处开始完后删掉的数量
				this.items.splice(index,1)
				axios.post("http://127.0.0.1:3000/deleteitem",{
					id:id
				},(result) =>{
					let res = result.data;
					if(res.status!=="0"){
						alert("新增失败，请检查网络原因")
					}else {
						//刷新最新数据
						getallitems()
					}
				})
			},

			//双击编辑:
			toEdit(item){
				this.currentItem = item
			},
			cancelEdit(item,index){		
				this.content = this.items[index].content;
				this.currentItem = null

			},
			saveData(item,index){
				//获取文本框中去除空格后的内容
				let content  = event.target.value.trim()
				//如果将content 内容修改为空，代表想删掉该节点
				if(!content){this.removeItem(index)}

				item.content = content;
				this.currentItem = null;
				axios.post("http://127.0.0.1:3000/updateitemcontent",{
					id:item.id,
					content:item.content
				},(result)=>{
					let res = result.data;
					if(res.status!=="0"){
						alert("新增失败，请检查网络原因")
					}else {
						//刷新最新数据
						getallitems()
					}
				})
			},

			saveStatus(item,index){
				// this.items.completed = item.completed
				// console.log(this.item.completed )
				let currentcompeleted = !this.items[index].completed
				// console.log(this.items[item])
				// console.log("当前状态为"+currentcompeleted)
				axios.post("http://127.0.0.1:3000/updateitemstatus",{
					id:item.id,
					completed:currentcompeleted
				},(result)=>{
					let res = result.data;
					if(res.status!=="0"){
						alert("新增失败，请检查网络原因")
					}else {
						//刷新最新数据
						getallitems()
					}
				})
			},
			removeallCompleted(){
				//使用filter函数:
				this.items = this.items.filter((item) =>{
					return !item.completed
				})
			},

		},
		computed:{
			//计算属性计算未完成项目
			imcompeleted(){
				return this.items.filter((item) => !item.completed).length
			},
			//计算全选
			isSelectAll:{
				set(newState){this.items.forEach((item) => { item.completed = newState})},
				get(){return this.imcompeleted === 0}
			},
			//计算显示项:
			filterItems(){
				//问题关键在于根据hash 读取filterState，见onhashchange函数
				switch (this.filterState) {
					case "active":
						return this.items.filter(item => !item.completed)
						break;
					case "completed":
						return this.items.filter(item => item.completed)
						break;
					default:
						return this.items
						break

				}
			}
		},
		//自定义局部指令:
		directives:{
			"todo-focus":{
				update(el,binding){
					if(binding.value){el.focus()}
				}
			},
			"focus":{
				inserted(el){
					el.focus()
				}
			}
		}
	})
	// Your starting point. Enjoy the ride!

	//系统hash 时改变时调用函数
	window.onhashchange = function () {
		const  hash = window.location.hash.substr(2) //"#/active"
		//将拿到的hash值回复给vm中的filterState
		vm.filterState = hash
	}
	window.onhashchange()

	//查看函数
	let getallitems = function(){
		axios.get('http://127.0.0.1:3000/items').then((result) =>{
			let res = result.data;
			if(res.status =="0"){
				// console.log(res)
				vm.items = res.result.list
			}
		})
	}
	window.onload = getallitems()
})(Vue);

